/* Jake Ruiz Graphic Design. Manila, Philippines. Coding and CSS by bakesix aka Jake Ruiz. Version 3.0.  */

.content {
  display: flex;
  flex-wrap: wrap;
}


@media screen and (max-width: 550px) {

body, html {
}

.container {
}
	
/* Header */

.header {
	padding-top:5%;
	padding-left:5%;
	padding-right:5%;
	background-color:#FFF;
	height:45px;
	position:fixed;
	z-index:20;
}

	.logo {
		height:30px;
		width:25%;
	}
	
		.logo img {
			height:30px;
		}
			
	.navframe {
		height:60px;
		width:75%;
	}	
	
	.nav {
		margin-top:0px;	
	}
	
		.nav ul {
			line-height:25px;	
		}
		
	.nav ul li { /*Parent link clicked*/
		padding-top: 7.5px;
	}
	
/* Content */

.content {

	width:100%;
	padding-left:0;
	padding-right:0;
	padding-top:100px;
}

.text {
	width:100%;
	padding-left:5%;
	padding-right:5%;
}


.description {
	width:100%;
	margin-left:0%;
}


.details {
	width:100%;
	font: .75em 'muller_narrowlight';
	margin-right:0;
}



	.title h3 {
		font:1.5em 'muller_narrowlight';
		padding-bottom:20px;
		padding-top:0px;
	}
	
	.text p {
		margin-left:0%;
		margin-bottom:20px;
		font: 1em 'muller_narrowlight';
	}
	
		#mediums {
			margin-left:50%;
			transform:rotate(0deg);
		}	


.works {	
	width:100%;
}
	
	.full {
		height:auto;
	}
	
	.zoomin {
		padding-top:0px;
	}	
	
	.collats:last-child {
		margin-bottom:40px;
	}
	
		.roadsafety {
			width:100%;
		}
	
/*For Zoomsss*/
	
.modal {
   	padding-top: 33vh;
	width: 100%;
   	height: 100%;
	}
	
.modal-content {
    width: 100%;
    max-width: 100%;
	}

	

/* Footer */
	
.footer {
	padding-left:5%;
	bottom:0;
	background-color:#FFF;
}

.footercontent {
	height:80px;

}

	.footer ul {
		bottom: 10px;
	}

	.footer li {
		font: .75em 'muller_narrowlight';
	}
	
	
}





@media screen and (min-width: 850px) {

.container {
	width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.photo {	
	background-size:150%;
}

	.text h1 {
		font:10em 'muller_narrowlight';
		line-height:155px;
		padding-bottom:5%;
	}
	
	.text h2 {
		margin-top:10%;	
	}	

}





@media screen and (max-height: 450px) {

.container {
	height:700px;
}

.header {
	height:80px;
}

	.navframe {
		width:20%;

}


.content {
	float:inherit;
}

.text {
	height:500px;
	width:100%;
}

.works {
	width:100%;
}

	.collats {
		height:auto;
	}


.footer {
	height:80px;
}

	.footer li {
		font: .75em 'muller_narrowlight';
	}